"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/2
 */
import * as React from 'react'
import {AvatarProps} from "../interface/index";
import {autoSize, commonStyles} from "../assets/styles/common";
import MyText from "./MyText";
import MyImage from "./MyImage";

const {Image, View, TouchableOpacity} = require('react-native');

class Avatar extends React.Component<AvatarProps, any> {
    static defaultProps = {
        size: autoSize(40),
        circle: true,
        borderWidth: 0,
        borderColor: 'transparent',
        content: null,
        onPress: null,

    };


    constructor(props: AvatarProps, context: any) {
        super(props, context);
        this.state = {
            source: props.source
        }
    }

    renderContent() {
        const {content} = this.props;
        if (content) {
            if (typeof content === 'string') {
                return <MyText fontSize={12} color='#999'>{content}</MyText>
            } else if (Array.isArray(content)) {
                return content;
            } else {
                return content;
            }
        }
        return null;
    }

    render() {
        const {size, circle, borderWidth, borderColor,source} = this.props;

        if (source) {
            if (this.props.onPress) {
                return (
                    <TouchableOpacity onPress={this.props.onPress}>
                        <MyImage {...this.props}
                                 source={source}
                                 placeholder={require('../assets/image/default-avatar.png')}
                                 style={[{
                                     borderRadius: circle ? size / 2 : 0,
                                     borderWidth,
                                     borderColor
                                 }, this.props.style]}/>
                    </TouchableOpacity>
                )
            }
            return (
                <MyImage {...this.props}
                         placeholder={require('../assets/image/default-avatar.png')}
                         style={[{
                             borderRadius: circle ? size / 2 : 0,
                             borderWidth,
                             borderColor
                         }, this.props.style]}/>
            );
        } else {
            if (this.props.onPress) {
                return (
                    <TouchableOpacity onPress={this.props.onPress}>
                        <View style={[{
                            width: size,
                            header: size,
                            borderRadius: circle ? size / 2 : 0,
                            borderWidth,
                            borderColor,
                            backgroundColor: '#f4f4f4'
                        }, commonStyles.centerVH, this.props.style]}>
                            {this.renderContent()}
                        </View>
                    </TouchableOpacity>
                )
            }
            return (
                <View style={[{
                    width: size,
                    height: size,
                    borderRadius: circle ? size / 2 : 0,
                    borderWidth,
                    borderColor,
                    backgroundColor: '#f4f4f4'
                }, commonStyles.centerVH, this.props.style]}>
                    {this.renderContent()}
                </View>
            )
        }

    }
}


export default Avatar;